<template>
  <div class="main">
    <div class="search">
      <el-form :inline="true" :model="skuInfo" class="demo-form-inline form">
        <el-form-item label="商品搜索">
          <el-input v-model.trim="skuInfo.skuName" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">
            查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="result">
      <div class="button"><el-button type="primary" icon="el-icon-circle-plus-outline" @click="addTask">新建</el-button>
        <el-button type="warning" plain @click="importData">导入数据</el-button></div>
      <div class="table">
        <el-table
          style="width: 100%"
          class="customer-table"
          :data="allSkuList"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
          />
          <el-table-column
            label="商品类型名称"
            prop="skuName"
          />
          <el-table-column
            prop="skuImage"
            label="商品图片"
            width="100"
          >
            <template slot-scope="{row}">
              <el-image :src="row.skuImage" />
            </template>
          </el-table-column>
          <el-table-column
            prop="brandName"
            label="品牌"
          />
          <el-table-column
            prop="unit"
            label="规格"
          />
          <el-table-column
            prop="price"
            label="商品价格"
          />
          <el-table-column
            prop="skuClass.className"
            label="商品类型"
          />
          <el-table-column
            prop="createTime"
            label="创建日期"
            width="160"
            :formatter="createTime"
          />
          <el-table-column
            label="操作"
          >
            <template slot-scope="{row}">
              <span class="edit" @click="editSku(row)">修改</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <add-sku ref="addSku" :dialog-visible.sync="dialogVisible" :all-sku-list="allSkuList" />
    <import-data :dialog-import-data.sync="dialogImportData" />

  </div>

</template>

<script>
import { getAllSkuData } from '@/api/sku'
import addSku from './components/addSku.vue'
import importData from './components/importData.vue'
import dayjs from 'dayjs'

export default {
  components: { addSku, importData },
  data() {
    return {
      skuInfo: {
        skuName: ''
      },
      allSkuList: [],
      dialogVisible: false,
      dialogImportData: false
    }
  },

  created() { this.getAllSkuData() },
  methods: {
    createTime(row) {
      return dayjs(row.createTime).format('YYYY.MM.DD HH:mm:ss')
    },
    async  onSubmit() {
      this.skuInfo.pageIndex = 1
      const { data } = await getAllSkuData(this.skuInfo)
      this.allSkuList = data.currentPageRecords
    },
    addTask() {
      this.dialogVisible = true
    },
    importData() {
      this.dialogImportData = true
    },
    async getAllSkuData() {
      const { data } = await getAllSkuData()
      console.log(data.currentPageRecords)
      this.allSkuList = data.currentPageRecords
    },
    editSku(row) {
      this.dialogVisible = true
      this.$refs.addSku.skuForm = { ...row }
      // console.log(row)
    }

  }
}
</script>

<style lang="scss" scoped>

.search {
    height: 64px;
    // width: 100%;
    background-color: #fff;
     display: flex;
     align-items: center;
     padding-top: 20px;
     margin-bottom: 20px;
        .el-button--primary {
            background-color: #6783f7;
            border-color: #6783f7;
             display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    font-size: 14px;

        }

    .form {
        padding: 0 0 0 17px;
        .el-form-item {
    .el-form-item__label {
        font-size: 14px;
    }
  ::v-deep  label {
        font-weight: 400 !important;
    }
}
    }

     }
     .result {
  padding: 20px 15px 19px 17px;
  background-color: #fff;
  .button {
    display: flex;
    .el-button--primary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    font-size: 14px;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
    // margin-right: 15px !important;
   ::v-deep .el-icon-circle-plus-outline{
      font-size: 16px !important;
    }
    }
    .el-button--warning.is-plain {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
      font-size: 14px;

  }

  }

     }
         .table {
    margin-top: 20px;
      ::v-deep .el-table th, .el-table tr th td {
         background: rgb(243, 246, 251);
         border: none;
         font-size: 14px;
         color: #666;
    }
    .el-table::before {
     height: 0;
    }
   ::v-deep .el-table td {
        border-bottom:none;
    }

  }
  .edit {
    color: #5f84ff;
    font-weight: 500;

  }
  .del {
    color: #ff5a5a;
    font-weight: 500;
    display: inline-block;
    margin-left: 10px;
  }
  .el-image {
    width: 25px;
  }

</style>
